<script setup lang="ts">
import { cancelAppointmentAPI } from '@/apis/cancelAppointment'
import { fetchCancelReasonAndConfigAPI } from '@/apis/fetchCancelReasonAndConfig'
import { useCancelReasonAndConfigStore } from '@/store/cancelReasonAndConfig'
import { useUserInfoStore } from '@/store/userInfo'
import dialogIcon from '@/static/images/checkmark_colorful.png'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const cancelReasonAndConfigStore = useCancelReasonAndConfigStore()

const id = ref('')

onLoad(async (options) => {
  if (options && options.id) {
    id.value = options.id

    const res = await fetchCancelReasonAndConfigAPI(userInfoStore.userInfo!.token!)
    if (res.data?.code === 1)
      cancelReasonAndConfigStore.setCancelReasonAndConfigData(res.data?.data)
    else
      uni.showToast({ title: res.data?.msg, icon: 'none' })
  }
  else { uni.showToast({ title: '数据获取失败', icon: 'none' }) }
})

const formRef = ref<any>(null)
const formData = ref({
  reason: '',
  note: '',
})

const isShowDialog = ref(false)

// 表单校验规则
const rules = {
  reason: [
    { required: true, message: '取消原因不可为空', trigger: ['blur', 'change'] },
  ],
}

function handleCheckboxChange(e: any) {
  formData.value.reason = e
}

function handleSubmit() {
  formRef.value.validate()
    .then(async () => {
      uni.showLoading()

      try {
        const res = await cancelAppointmentAPI({
          id: id.value,
          reason: formData.value.reason,
          reason_remark: formData.value.note,
        }, userInfoStore.userInfo!.token!)

        uni.hideLoading()

        if (res.data?.code === 1)
          isShowDialog.value = true
        else
          uni.showToast({ title: res.data?.msg, icon: 'none' })
      }
      catch (err) {
        uni.showToast({ title: JSON.stringify(err), icon: 'none' })
      }
    })
    .catch((errors: AnyObject[]) => {
      // 表单验证失败
      if (errors.length > 0)
        uni.showToast({ title: errors[0].message, icon: 'none' })
    })
}

function handleExit() {
  router.back()
}
</script>

<template>
  <Spacer height="44" />
  <Title>选择取消原因</Title>
  <Spacer height="24" />
  <uv-form ref="formRef" :model="formData" :rules="rules">
    <view class="overflow-hidden rounded-10rpx bg-white">
      <uv-form-item prop="reason" :custom-style="{ padding: 0, margin: 0 }">
        <ListCell label="取消原因" direction="column" :disable-hover-style="true">
          <uv-radio-group
            v-model="formData.reason"
            active-color="#4999F7"
            :custom-style="{ display: 'grid', gridTemplateColumns: 'repeat(1, minmax(0, 1fr))', gap: '24rpx' }"
            @change="handleCheckboxChange"
          >
            <uv-radio
              v-for="reason in cancelReasonAndConfigStore.cancelReasonAndConfigData?.cannle_reason"
              :key="reason.reason"
              :name="reason.reason"
              :label="reason.reason"
              label-size="28rpx"
              :label-color="formData.reason === reason.reason ? '#000000' : '#848484'"
              shape="circle"
              size="40rpx"
            />
          </uv-radio-group>
        </ListCell>
      </uv-form-item>
    </view>
    <Spacer height="24" />
    <view class="overflow-hidden rounded-10rpx bg-white">
      <uv-form-item prop="note" :custom-style="{ padding: 0, margin: 0 }">
        <ListCell label="备注" direction="column" :disable-hover-style="true">
          <textarea
            v-model="formData.note"
            class="text-28rpx text-#333333 leading-40rpx"
            placeholder="请输入备注"
            placeholder-class="text-#848484"
          />
        </ListCell>
      </uv-form-item>
    </view>
    <Spacer height="360" />
  </uv-form>
  <button
    class="fixed bottom-80rpx h-120rpx w-700rpx flex items-center justify-center rounded-10rpx from-#4999F7 to-#77DAFE bg-gradient-to-r text-36rpx text-white font-medium x-center"
    @tap="handleSubmit"
  >
    确认
  </button>

  <uv-overlay :show="isShowDialog" @tap="isShowDialog = false">
    <uv-transition mode="zoom-in" :show="isShowDialog">
      <view class="relative h-screen w-screen">
        <Dialog
          :icon="dialogIcon"
          title="已取消"
          hide-cancel-button
          @confirm="handleExit"
        />
      </view>
    </uv-transition>
  </uv-overlay>
</template>

<route lang="yaml">
name: 'cancelAppointment'
style:
  navigationBarTitleText: '选择取消原因'
</route>
